<template>
	<div style="margin: 50px;margin-left: 600px;">
		<el-form>
			<el-form-item label="用户名" label-width="100px">
				<el-input v-model="userName" style="width: 200px" placeholder="请输入用户名" clearable> </el-input>
				</el-form-item>
				<el-form-item label="原始密码" label-width="100px">
					<el-input v-model="userOldPwd" style="width: 200px" placeholder="请输入原密码" 
					clearable type="password" @blur="checkPwd"> </el-input>
				</el-form-item>
				<el-form-item label="新密码" label-width="100px">
					<el-input style="width: 200px" v-model="userNewPwd1" placeholder="请输入新密码" clearable type="password"> </el-input>
				</el-form-item>
				<el-form-item label="确认密码" label-width="100px">
					<el-input v-model="userNewPwd2" style="width: 200px" 
					clearable placeholder="请再次输入新密码" type="password" 
					@blur="checkPwd2"> </el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="updateUserPwd" style="margin-left: 130px;margin-top: 20px;" >确认</el-button>
				</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default{
	name:"UpdatePwd",
	data(){
		return{
			labelPosition: 'top',
			userName:"",
			userOldPwd:"",
			userNewPwd1:"",
			userNewPwd2:"",
		}
	},
	methods:{
		checkPwd(){
			var _this = this;
			var user ={
				"userName":this.userName,
				"userPwd":this.userOldPwd
			}
			this.$Request
			.fetch_("/user/checkUserPwd","post",user)
			.then((result) =>{
				if(result.status == 200){
					this.$message({
					    message:result.msg,
					    type:"success",
						duration:1000
					});
				}else{
					this.$message({
					    message:result.msg,
					    type:"error",
						duration:1000
					});
				}
			})
			.catch((error) => {
				this.$message.error(error);
			});
		},
		checkPwd2(){
			if(this.userNewPwd1!=this.userNewPwd2){
			    this.$message({
			        message:"两次输入的密码不一致，请重新输入",
			        type:"warning",
					duration:1000
			    });
			}
		},
		updateUserPwd(){
			var _this = this;
			var user ={
				"userName":this.userName,
				"userPwd":this.userNewPwd2
			}
			this.$Request
			.fetch_("/user/updateUserPwd",'post',user)
			.then((result) =>{
				if(result.status == 200){
					this.$message.success(result.msg);
					this.$VuexStore.commit("setToken", "");
					this.$router.push("/login")
				}else{
					this.$message.error(result.msg);
				}
			})
			.catch((error) => {
				this.$message.error(error);
			});
		},
	}
}	
</script>

<style>
</style>